<template>
  <div class="banner">
    <div class="banner-img">
      <img v-for="(item,index) in bannerimg" :key="item.id" :src="item" alt v-show="index==num" />
    </div>
    <div class="banner-button">
      <ul>
        <li
          v-for="(item,index) in bannerimg"
          :key="item.id"
          :class="{active:index==num}"
          @click="swiperclick(index)"
        ></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  // data() {
  //   return {
  //     bannerimg: [
  //       "http://mall.pic.sharkshopping.com/oss/xin_prod/image/100424/0127222124-20200127204345_d0701669.jpg",
  //       "http://mall.pic.sharkshopping.com/oss/xin_prod/image/100278/0121105111-push_c84610b4.jpg",
  //       "http://mall.pic.sharkshopping.com/oss/xin_prod/image/100807/0203174051_874f4c4d.png"
  //     ],
  //     num: 0
  //   };
  // },
  data() {
    return {
      num: 0,
    };
  },
  props: {
    bannerimg: {
      type: Array,
      required: true
    },
  },
  methods: {
    autoplay() {
      setInterval(() => {
        this.num++;
        if (this.num == this.bannerimg.length) {
          this.num = 0;
        }
      }, 2000);
    },
    swiperclick(index) {
      this.num = index;
    }
  },
  mounted() {
    this.autoplay();
  }
};
</script>
<style lang="scss" scoped>
.banner {
  // width: 24.375rem;
  // display: flex;
  margin: 0.9rem 0.7375rem 0.3375rem 0.7375rem;
  height: 4.25rem;
  position: relative;
  .banner-img {
    position: relative;
    height: 100%;
    img {
      width: 100%;
      justify-content: center;
      border-radius: 0.4375rem;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .banner-button {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: -2rem;
    ul {
      height: 100%;
      li {
        display: inline-block;
        width: 0.3125rem;
        height: 0.3125rem;
        border-radius: 100%;
        background: cornsilk;
        margin: 5.425rem 0.5rem 0 0;
      }
      .active {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
  }
}
</style>